<template>
	<view class="mall-sku" :class="{fadeIn:fadeIn,fadeOut:fadeOut}">
		<view class="fade" :class="{show:show}"    @click="show=!show"></view>
		<view class="con" >
			<view class="goods-info">
				<image class="img" :src="info.img"></image>
				<view class="info" v-if="info">
					<text class="price">￥{{info.price}}</text>
					<text class="stock">库存: {{info.stock}} 件</text>
					<text class="sku-item" v-if="sku">已选: {{sku.name}}</text>
					<text class="sku-item" v-if="!sku">请选择规格</text>
			</view>
		</view>
		<view class="sku" v-for="(theme,index) in skuThemeList" :key="index">
			<view class="theme">
				{{theme.name}}
			</view>
			<view class="skus" >
				<view @click="clickSku(index,u.name)" :class="{sel:theme.sel==u.name}"  class="sku-item" v-for="(u,idx) in theme.items" :key="idx">
					{{u.name}}
				</view>
			</view>
		</view>
		<view class="num-edit">
			<view class="txt">数量</view>
			<num-edit v-model="number"></num-edit>
		</view>
		<view class="btn" @click="selected">
			完成
		</view>
		
		<text @click="hide" class="iconfont iconcha"></text>
	</view>
	</view>
</template>

<script>
	import numEdit from '../base/num-edit/num-edit.vue'
	import CONFIG from '@/config/index.js'
	import {showError} from '@/toast'
	export default {
		methods:{
			selected(){
				if(!this.sku||!this.number>0){
					if(!this.number>0){
						showError('当前规格库存不足')
					}
					return
				}
				this.$emit("selectSku",this.sku,this.number,this.goods)
				this.hide()
			},
			clickSku(index,name){
				let theme = this.skuThemeList[index]
				if(theme.sel == name){
					theme.sel = null
				}else{
					theme.sel = name
				}
				this.$set(this.skuThemeList,index,theme)
			},
			hide(){
				this.fadeOut = true
				setTimeout(()=>{
					this.$emit("update:show",false)
				},300)
				// this.$emit("update:show",false)
			},
			itemToTheme(){
				if(!this.goods.skuItemList){
					return []
				}
				
				let res = []
				let map = {}
				    //用map去重合并
				    this.goods.skuItemList.forEach(item => {
				        let list = []
				        if (map[item.theme]) { //存在
				            list = map[item.theme]
				        }
				        list.push(item)
				        map[item.theme] = list
				    })
				    //转换成theme对象
				    for (let key in map){
				        let ob = {name: key, items: map[key],sel:null}
				        res.push(ob)
				    }
					this.skuThemeList  = res
			}
		},
		created() {
			this.fadeIn = true
			this.itemToTheme()
		},
		components:{
			numEdit	
		},
		props:{
			show:Boolean,
			goods:Object
		},
		computed:{
				  info(){
					  if(this.sku){
						   let img
						  if(this.sku.img){
							     img = CONFIG.IMG_HEAD + this.sku.img
						  }else{
							    img = CONFIG.IMG_HEAD + this.goods.minImg
						  }
						
						  let price = this.sku.price
						  let stock = this.sku.stock
						 return {img,price,stock}
					  }else{ // 展示产品的
						  let img = CONFIG.IMG_HEAD + this.goods.minImg
						  let price = this.goods.nowPrice
						  let stock = this.goods.stock
						  return {img,price,stock}
					  }
				  },
				   sku(){
					   let sks = []
					   let done = true
					  for(let theme of this.skuThemeList){
						if(theme.sel){
							sks.push(theme.sel)
						}else{
							done = false
							break
						}
					 }
					 if(done){
						 let skuName =   sks.join('-')
						 let res = null;
						 for(let item of this.goods.skuList){
							if(item.name == skuName){
							  res = item
							  break
							  }
						 }
						 return res
						
					 }else{
						 return null
					 }
					   
				   }
		},
		data() {
			return {
				number:1,
				skuThemeList:[],
				fadeIn:false,
				fadeOut:false
			};
		}
	}
</script>

<style lang="stylus" scoped>
.mall-sku
	z-index 2
	position fixed
	top 0
	left 0
	right 0
	bottom 0
	transition all .3s 
	.fade
		z-index 0
		visibility hidden
		position fixed
		top 0
		right 0
		left 0
		bottom 0
		background-color #4F4E4E
		transition all .3s 
		opacity 0
		&.show
			visibility:visible
			opacity 0.8
	&.fadeIn
		opacity 1
		.con
			position: absolute;
			bottom 0upx
	&.fadeOut
		opacity 0
		.con
			position: absolute;
			bottom -100%
	.con
		z-index 2
		background-color #FFFFFF
		border-radius:10upx;
		padding 0 20upx 20upx
		position absolute
		left 0
		right  0
		bottom -100%
		transition all .3s 
		.iconcha
			font-size 20upx
			color red
			position absolute
			right 20upx
			top 20upx
		.goods-info
			margin-bottom 40upx
			display flex
			.img
				width:181upx;
				height:176upx;
				margin-top -40upx
				border-radius 10upx
			.info
				margin-left 30upx
				display flex
				flex-direction column
				.price
					margin-top 28upx
					line-height 28upx
					font-size:28upx;
					color:rgba(248,138,94,1);
					margin-bottom 17upx
				.stock
					line-height 22upx
					font-size:22upx;
					margin-bottom 15upx
				.sku-item
					color #707070
					font-size 22upx
		.sku
			margin-top 40upx
			padding 0 10upx
			.theme
				color #707070
				font-size:22upx;
				margin-bottom 16upx
			.skus
				margin-top 16upx
				display flex
				.sku-item
					margin-left 20upx
					color #707070
					background-color #E2E2E2
					padding 10upx 20upx
					font-size 22upx
					border-radius:15upx;
					&:first-child
						margin-left 0upx
					&.sel
						background-color #FBDFD4
						color #F88A5E
		.num-edit
			margin-top 33upx
			margin-left 10upx
			.txt
				color #707070
				font-size 22upx
				margin-bottom 23upx
		.btn
			height:70upx;
			background:#A24545;
			border-radius:30upx;
			color white
			line-height 70upx
			margin-top 37upx
			font-size 28upx
			text-align center
				
</style>
